<template>
	<!-- 修改资料 -->
	<view class="page-user">
		<view class="bgwhite">
			<view class="info_main">
				<view>头像</view>
				<view class="ava" style="width: 40px; height: 40px;" @click="set_ava">
					
					<image style="width: 40px; height: 40px;box-shadow: 0 0 3px 0.5px #e8e8e8;" :src="userlist.avatar" v-if="uavatar==''"></image>
					<image style="width: 40px; height: 40px;box-shadow: 0 0 3px 0.5px #e8e8e8;" :src="uavatar" v-if="!uavatar==''"></image>
				</view>
			</view>
			<view class="info_cont">
				<view>昵称</view>
				<input class="color999" type="text" v-model="uname" :placeholder="userlist.nickname?userlist.nickname:'输入中文或英文，1~8个字'"/>
			</view>
			
			<view class="info_cont">
				<view>性别</view>
				<input @click="sex_show = true" v-model="usex" :placeholder="userlist.sex?userlist.sex:'请选择性别'">
				<view class="color999 uni-input">
					<u-picker :show="sex_show" :columns="sex_columns" @cancel="sex_show=false" @confirm="sex_confirm"></u-picker>
				</view>
			</view>
			
			<view class="info_cont">
				<view>生日</view>
				<input @click="datePickerShow = true" :placeholder="userlist.birthday?userlist.birthday:'点击选择生日'" disabled="ture" v-model="ubirthday"></input>
				<view class="color999 uni-input">
					 <u-datetime-picker
						:value="ubirthday?new Date(ubirthday):new Date(2000,0,1)"
						:show="datePickerShow"
						v-model="value1"
						mode="date"
						@confirm="user_confirm"
						@cancel="datePickerShow = false"
					></u-datetime-picker>
					<!-- <u-button @click="datePickerShow = true" class="color999 uni-input" style="border: none;text-align: right;color: #999;padding: 0;">点击选择生日</u-button> -->
				</view>
				
			</view>
			<view class="info_cont" @click="open">
				<view>所在地</view>
				<input class="color999 uni-input" :placeholder="userlist.addr?userlist.addr:'请输入地址'" disabled="ture" v-model="uaddr"></input>
				<!-- <view v-model="uaddr">请输入地址</view> -->
			</view>
			<!-- 选择地址的 弹出层 -->
			<cityPicker :defaultValue="defaultValue" :mask-close-able="maskCloseAble" @confirm="addr_confirm" @cancel="addr_cancel" :visible="addr_visible" />
			
			<view class="info_cont">
				<view>手机号</view>
				<input class="color999" type="text" v-model="userlist.username" disabled="true" />
			</view>
		</view>
		<view class="confirm-btn" @click="edit_user">确定</view>
	</view>
</template>

<script>
	import cityPicker from '../../components/piaoyi-cityPicker/pioayi-cityPicker.vue'
export default {
	components: {
		cityPicker
	},
	data() {
		return {
			userlist:[],
			uid:'',
			uname:'',//昵称
			uavatar:"",//头像
			username:"",//电话号码
			value1: Number(new Date()),
			ubirthday:"",//生日
			datePickerShow:false,//生日 的 弹出框 是否显示
			host:'https://4de16698-d9f4-443a-b416-ef1037cce952.bspapp.com/http',
			uaddr:'',//地址
			uaddr_code:'',//地址代码
			addr_visible: false,//地址的 弹出框 是否显示
			maskCloseAble: true,//地址的参数
			defaultValue: '',//地址的参数
			usex:'',//性别
			sex_show: false,//选择性别的弹出框 是否显示
			sex_columns: [['女', '男' ]]//选择性别的弹出框的内容
		};
	},
	onShow() {},
	mounted() {
		this.get_user()
	},
	methods: {
		// 生日
		user_confirm(e){
			let user_time=e.value
			console.log(user_time);
			
			// 如果时间戳的长度为10，就*1000
			if(user_time.toString().length===10) user_time *=1000;
			let date = new Date(user_time);
			let year= date.getFullYear().toString()//年
			let month= (date.getMonth() + 1).toString()//月
			let tian= date.getDate().toString()//日
			
			let d = [year,month,tian].map(v=>{
				return (v+'').length>1?v:'0'+v// 判断v是不是两位
			}).join('/')
			
			this.ubirthday=d;
			console.log(this.ubirthday);
			this.datePickerShow=false;
		},
		// 获取用户信息
		get_user(){
			let token=uni.getStorageSync('token')
			this.token=token;
			uni.request({
				method:'POST',
				data:{
					'token':this.token
				},
				url:this.host+'/user/getuserInfo',
				success:(res) => {
					this.userlist=res.data.userInfo
					console.log(this.userlist);
				},
				fail: () => {
					console.log('请求失败');
				} 
			})
		},
		// 设置头像
		set_ava(){
			uni.chooseImage({
				count: 1, //最多可以选择的图片张数
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success:(res)=>{
					let tep_img=JSON.stringify(res.tempFilePaths)
					this.uavatar=tep_img.slice(2,tep_img.length-2)
					console.log(this.uavatar);
				}
			});
		},
		// 选择地址的 弹出层 的方法open,confirm,cancel
		open () {
			this.addr_visible = true
		},
		// 地址 确认
		addr_confirm (val) {
			// console.log(val)
			this.uaddr = val.name
			this.uaddr_code = val.code
			this.addr_visible = false
		},
		// 地址 取消
		addr_cancel () {
			this.addr_visible = false
		},
		// 性别 确认
		sex_confirm(val){
			// console.log(val.value.toString());
			this.usex=val.value.toString()
			this.sex_show=false
		},
		// 更改用户资料
		edit_user(){
			let uid=uni.getStorageSync('uid')
			this.uid=uid;
			uni.request({
				method:'POST',
				data:{
					avatar:this.uavatar?this.uavatar:this.userlist.avatar,
					nickname:this.uname?this.uname:this.userlist.nickname,
					sex:this.usex?this.usex:this.userlist.sex,
					birthday:this.ubirthday?this.ubirthday:this.userlist.birthday,
					addr:this.uaddr?this.uaddr:this.userlist.addr,
					addr_code:this.uaddr_code?this.uaddr_code:this.userlist.addr_code,
					uid:this.uid,
				},
				url:this.host+'/user/editUserInfo',
				success:(res) => {
					console.log(res);
					if(res.data.code==1){
						uni.$u.toast(res.data.msg)
						setTimeout(function(){
							uni.switchTab({
								url: '/pages/user/user'
							})
						},500)
					}
				},
				fail: () => {
					console.log('请求失败');
				} 
			})
		}
	}
};
</script>

<style lang="scss">
.bgwhite {
	background: #fff;
}
.page-user {
	width: 100%;
	height: 100%;

	.info_main {
		width: 100%;
		height: 120upx;
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		overflow: hidden;
		padding: 0 30upx;

		view {
			font-size: 30upx;
			color: #999999;
		}

		image {
			float: right;
			width: 94upx;
			height: 94upx;
			border-radius: 50%;
		}
	}

	.info_main:after {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		background-color: #eeeeee;
	}

	.info_cont {
		width: 100%;
		height: 101upx;
		position: relative;
		overflow: hidden;
		padding: 0 30upx;

		view {
			font-size: 30upx;
			line-height: 101upx;
			color: #999999;
			float: left;
		}

		.txt {
			display: block;
			width: auto;
			height: 101upx;
			float: right;
			text-align: right;
			margin-right: 10upx;
			font-size: 30upx;
			width: 500upx;
		}

		.uni-input,
		input {
			display: block;
			width: auto;
			height: 101upx;
			float: right;
			text-align: right;
			margin-right: 10upx;
			font-size: 30upx;
			width: 500upx;
		}

		text {
			font-size: 14upx;
			color: #bfbfbf;
			float: right;
			line-height: 101upx;
		}

		.iconfont {
			font-size: 28upx;
		}
	}

	.uni-input-placeholder {
		color: #999;
	}

	.info_cont:after {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		background-color: #eeeeee;
	}
}

.confirm-btn {
	width: 80%;
	height: 80upx;
	background: #fdd100;

	border-radius: 60upx;
	margin: 40upx auto;

	text-align: center;
	color: #fff;
	line-height: 80upx;
	font-size: 30upx;
}
</style>
